{% extends 'base/base.html' %}

{% block title %}{{ title }} - 多用户报警系统{% endblock %}

{% block content %}
<div class="container main-container">
    <div class="row mb-4">
        <div class="col-lg-12">
            <h1 class="page-title">{{ title }}</h1>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">任务执行日志</h3>
                </div>
                
                <div class="card-body">
                    {% if messages %}
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                                {{ message }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        {% endfor %}
                    {% endif %}
                    
                    <!-- 过滤表单 -->
                    <div class="mb-4">
                        <form method="get" class="form-inline">
                            <div class="form-group mr-2 mb-2">
                                <label for="id_task" class="mr-2">任务：</label>
                                {{ form.task }}
                            </div>
                            <div class="form-group mr-2 mb-2">
                                <label for="id_start_date" class="mr-2">开始日期：</label>
                                {{ form.start_date }}
                            </div>
                            <div class="form-group mr-2 mb-2">
                                <label for="id_end_date" class="mr-2">结束日期：</label>
                                {{ form.end_date }}
                            </div>
                            <div class="form-group mr-2 mb-2">
                                <label for="id_is_success" class="mr-2">执行状态：</label>
                                {{ form.is_success }}
                            </div>
                            <button type="submit" class="btn btn-primary mb-2">
                                <i class="fa fa-search"></i> 搜索
                            </button>
                            <a href="{% url 'tasks:task_execution_logs' %}" class="btn btn-secondary ml-2 mb-2">
                                <i class="fa fa-refresh"></i> 重置
                            </a>
                        </form>
                    </div>
                    
                    <!-- 批量操作按钮 -->
                    <div class="mb-4">
                        <form id="bulk-delete-form" method="post" action="{% url 'tasks:task_execution_logs_bulk_delete' %}">
                            {% csrf_token %}
                            <button type="submit" id="bulk-delete-btn" class="btn btn-danger" disabled>
                                <i class="fa fa-trash"></i> 批量删除选中日志
                            </button>
                        </form>
                    </div>
                     
                    <!-- 日志列表 -->
                    <div class="table-responsive">
                        <table class="table table-hover table-striped">
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="select-all-logs">
                                    </th>
                                    <th>任务名称</th>
                                    <th>开始时间</th>
                                    <th>结束时间</th>
                                    <th>持续时间</th>
                                    <th>状态</th>
                                    <th>错误信息</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for log in page_obj %}<tr>
                                    <td>
                                        <input type="checkbox" class="log-checkbox" name="selected_logs" value="{{ log.id }}" form="bulk-delete-form">
                                    </td>
                                    <td>{{ log.task.name }}</td>
                                    <td>{{ log.start_time|date:"Y-m-d H:i:s" }}</td>
                                    <td>
                                        {% if log.end_time %}
                                            {{ log.end_time|date:"Y-m-d H:i:s" }}
                                        {% else %}
                                            - 
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if log.duration %}
                                            {{ log.duration }}秒
                                        {% else %}
                                            - 
                                        {% endif %}
                                    </td>
                                    <td>
                                        {% if log.is_success %}
                                            <span class="badge badge-success">成功</span>
                                        {% else %}
                                            <span class="badge badge-danger">失败</span>
                                        {% endif %}
                                    </td>
                                    <td>{{ log.error_message|default:"无"|truncatechars:50 }}</td>
                                    <td>
                                        <a href="{% url 'tasks:task_execution_log_detail' log.id %}" class="btn btn-sm btn-info">
                                            <i class="fa fa-eye"></i> 查看详情
                                        </a>
                                        <a href="{% url 'tasks:task_execution_log_delete' log.id %}" class="btn btn-sm btn-danger ml-1">
                                            <i class="fa fa-trash"></i> 删除
                                        </a>
                                    </td>
                                </tr>{% empty %}
                                <tr>
                                    <td colspan="8" class="text-center">暂无执行日志</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                    
                    <!-- JavaScript 代码以支持批量选择 -->
                    <script>
                        document.addEventListener('DOMContentLoaded', function() {
                            const selectAllCheckbox = document.getElementById('select-all-logs');
                            const logCheckboxes = document.querySelectorAll('.log-checkbox');
                            const bulkDeleteBtn = document.getElementById('bulk-delete-btn');
                            
                            // 全选/取消全选功能
                            selectAllCheckbox.addEventListener('change', function() {
                                logCheckboxes.forEach(checkbox => {
                                    checkbox.checked = selectAllCheckbox.checked;
                                });
                                updateBulkDeleteButton();
                            });
                            
                            // 单个复选框变化时更新全选状态和批量删除按钮
                            logCheckboxes.forEach(checkbox => {
                                checkbox.addEventListener('change', function() {
                                    updateSelectAllCheckbox();
                                    updateBulkDeleteButton();
                                });
                            });
                            
                            // 更新全选复选框状态
                            function updateSelectAllCheckbox() {
                                const allChecked = Array.from(logCheckboxes).every(checkbox => checkbox.checked);
                                const anyChecked = Array.from(logCheckboxes).some(checkbox => checkbox.checked);
                                selectAllCheckbox.checked = allChecked;
                                selectAllCheckbox.indeterminate = anyChecked && !allChecked;
                            }
                            
                            // 更新批量删除按钮状态
                            function updateBulkDeleteButton() {
                                const anyChecked = Array.from(logCheckboxes).some(checkbox => checkbox.checked);
                                bulkDeleteBtn.disabled = !anyChecked;
                            }
                            
                            // 提交表单前的确认提示
                            document.getElementById('bulk-delete-form').addEventListener('submit', function(e) {
                                if (!confirm('确定要删除选中的日志吗？此操作不可逆。')) {
                                    e.preventDefault();
                                }
                            });
                        });
                    </script>
                    
                    <!-- 分页控件 -->
                    {% if page_obj.paginator.num_pages > 1 %}
                    <div class="pagination justify-content-center mt-4">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                {% if page_obj.has_previous %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page=1" aria-label="First">
                                            <span aria-hidden="true">&laquo;&laquo;</span>
                                        </a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                {% endif %}
                                
                                {% for num in page_obj.paginator.page_range %}
                                    {% if page_obj.number == num %}
                                        <li class="page-item active">
                                            <span class="page-link">{{ num }}</span>
                                        </li>
                                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                                        <li class="page-item">
                                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                                        </li>
                                    {% endif %}
                                {% endfor %}
                                
                                {% if page_obj.has_next %}
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.next_page_number }}" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                    <li class="page-item">
                                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}" aria-label="Last">
                                            <span aria-hidden="true">&raquo;&raquo;</span>
                                        </a>
                                    </li>
                                {% endif %}
                            </ul>
                        </nav>
                    </div>
                    {% endif %}
                    
                    <!-- 返回按钮 -->
                    <div class="text-center mt-4">
                        <a href="{% url 'tasks:scheduled_task_list' %}" class="btn btn-secondary">
                            <i class="fa fa-arrow-left"></i> 返回定时任务列表
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}